import Taro, {Component,Config} from "@tarojs/taro";
import {View, Image, Text} from "@tarojs/components";
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime, getAvatar, servicePhoneNumber, subtime} from '../../utils/common'

import './index.less'
import right from "../../assets/img/right.png";
import check from "../../assets/img/icon_74.png";
import check_on from "../../assets/img/icon_74_on.png";

// 会员升级
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Company extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    memberType: [
      {
        id: 0,
        name: '普通用户'
      },
      {
        id: 1,
        name: 'VIP会员'
      },
      {
        id: 2,
        name: '代理商'
      },
      {
        id: 3,
        name: '合伙人'
      },
    ],
    memberTypeName: '',
    currentMemberType: 1, // 会员类型
    userInfo: getRuntime().getUserInfo() || {},
    amount: {}, // 升级费用
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'会员升级' })
    let memberType = this.$router.params.id
    let index = this.state.userInfo.agencyLevel
    this.getAgencyAmount()
    this.setState({
      memberTypeName: this.state.memberType[index]['name'],
      currentMemberType: parseInt(memberType) || 1
    })
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  config: Config = {
    navigationBarTitleText: '会员升级'
  }
  
  // 获取升级费用
  getAgencyAmount() {
    let { userStore } = this.props.stores
    userStore.getAgencyAmount({
      callback: res => {
        this.setState({
          amount: toJS(res)
        })
      }
    })
  }

  changeMemberType(id:number){
    this.setState({
      currentMemberType:id
    })
  }

  // 升级购买
  buyAgent(level: number, amount: number) {
    let { userStore } = this.props.stores
    let { memberType, userInfo } = this.state
    if(level > 0 && level === userInfo.agencyLevel ){
      getRuntime().showToast(`您已经是${memberType[level]['name']}了, 无法再次购买~`); return;
    }
    userStore.agencyApply({
      form:{
        agencyLevel: level,
        agencyAmount: amount,
        payType: 1
      },
      callback: res => {
        getRuntime().wxPay(res, () => {
          // 更新缓存用户信息
          userInfo.agencyLevel = level
          getRuntime().setStorage('user', userInfo)
          getRuntime().navigateTo('/pages/user/upgrade_pay_success')
        })
      }
    })
  }

  makePhone() {
    getRuntime().makePhoneCall(servicePhoneNumber)
  }

  render() {
    let { currentMemberType,userInfo,memberTypeName,amount } = this.state
    return (
      <View className='my-my_upgrade'>
        <View className='list-21-item'>
          <Image src={getAvatar(userInfo.avatar)} className='img' />
          <View className='info'>
            <View className='list-title'>{userInfo.name}
              <Text className='list-label'>{memberTypeName}</Text>
            </View>
            <View className='list-info'>
              {userInfo.agencyLevel===1&& <Text>VIP会员至：{subtime(userInfo.endDateTime)}</Text>}
              {userInfo.agencyLevel===2&& <Text>代理商至：{subtime(userInfo.endDateTime)}</Text>}
              {userInfo.agencyLevel===3&& <Text>合伙人至：{subtime(userInfo.endDateTime)}</Text>}
            </View>
          </View>
          <View className='r' onClick={this.handelRouter.bind(this, '/pages/user/buy_log')}>
            <View className='list-desc'>购买记录</View>
            <Image src={right} className='icon-drop-down' />
          </View>
        </View>

        <View className='interval' />

        <View className='member-upgrade-wrap'>

          <View className={currentMemberType===1 ? 'item-member-upgrade item-member-upgrade-active' : 'item-member-upgrade'}
                onClick={this.changeMemberType.bind(this, 1)} >
            <View className='list-title'>建务通VIP会员</View>
            <View className='info'>
              <View className='l'>
                <Text className='money'>{amount.normalAmount}</Text>
                <Text className='small'>元/年</Text>
                <Text className='old-price'>原价 ￥{amount.oldNormalAmount}</Text>
              </View>
              {currentMemberType===1&&  <Image src={check_on} className='img' />}
              {currentMemberType!==1&&  <Image src={check} className='img' />}
            </View>
          </View>

          <View className={currentMemberType===2 ? 'item-member-upgrade item-member-upgrade-active' : 'item-member-upgrade'}
                onClick={this.changeMemberType.bind(this, 2)}>
            <View className='list-title'>建务通代理商</View>
            <View className='info'>
              <View className='l'>
                <Text className='money'>{amount.twoAmount}</Text>
                <Text className='small'>元/年</Text>
                <Text className='old-price'>原价 ￥{amount.oldTwoAmount}</Text>
              </View>
              {currentMemberType===2&&  <Image src={check_on} className='img' />}
              {currentMemberType!==2&&  <Image src={check} className='img' />}
            </View>
          </View>

          <View className={currentMemberType===3 ? 'item-member-upgrade item-member-upgrade-active' : 'item-member-upgrade'}
                onClick={this.changeMemberType.bind(this, 3) }>
            <View className='list-title'>建务通合伙人</View>
            <View className='info'>
              <View className='l'>
                <Text className='money'>{amount.oneAmount}</Text>
                <Text className='small'>元/年</Text>
                <Text className='old-price'>原价 ￥{amount.oldOneAmount}</Text>
              </View>
              {currentMemberType===3&&  <Image src={check_on} className='img'/>}
              {currentMemberType!==3&&  <Image src={check} className='img'/>}
            </View>
          </View>

        </View>


        <View className='upgrade-title'>
          <Text  className={'line'}/>
          {
            currentMemberType===1&&
            <Text  className={'title'}> 会员特权说明 </Text>
          }
          {
            currentMemberType===2&&
            <Text  className={'title'}> 代理商特权说明 </Text>
          }
          {
            currentMemberType===3&&
            <Text  className={'title'}> 合伙人特权说明 </Text>
          }

          <Text  className={'line'}/>
        </View>
        <View className='tel' onClick={this.makePhone.bind(this)}>
          <Text className='s'>咨询热线： {servicePhoneNumber}</Text>
        </View>
        {
          currentMemberType===1&&
          <View className='upgrade-desc'>
             <View>一、团队累计达100位VIP。</View>
             <View>二、直接推荐VIP奖励100元/位，间接推荐VIP奖励40元/位，团队VIP服务奖20元/位。</View>
             <View>三、自用及直推会员还款万20奖励，会员团队还款万10奖励，VIP团队万5奖励。</View>
             <View>四、团队服务奖励，直接会员团队3%，VIP团队2%，直推代理2%。</View>
             <View>五、条件：直推3位VIP。</View>
          </View>
        }
        {
          currentMemberType===2&&
          <View className='upgrade-desc'>
             <View>一、代理商。</View>
             <View>一、团队累计达100位VIP。</View>
             <View>二、直接推荐VIP奖励100元/位，间接推荐VIP奖励40元/位，团队VIP服务奖20元/位。</View>
             <View>三、自用及直推会员还款万20奖励，会员团队还款万10奖励，VIP团队万5奖励。</View>
             <View>四、团队服务奖励，直接会员团队3%，VIP团队2%，直推代理2%。</View>
             <View>五、条件：直推3位VIP。</View>
          </View>
        }
        {
          currentMemberType===3&&
          <View className='upgrade-desc'>
             <View>一、合伙人。</View>
             <View>一、团队累计达100位VIP。</View>
             <View>二、直接推荐VIP奖励100元/位，间接推荐VIP奖励40元/位，团队VIP服务奖20元/位。</View>
             <View>三、自用及直推会员还款万20奖励，会员团队还款万10奖励，VIP团队万5奖励。</View>
             <View>四、团队服务奖励，直接会员团队3%，VIP团队2%，直推代理2%。</View>
             <View>五、条件：直推3位VIP。</View>
          </View>
        }


        <View className='footer-block' />

        <View >
          {currentMemberType===1&&
          <View className='page-submit' onClick={this.buyAgent.bind(this,1,amount.normalAmount)}>立即以{amount.normalAmount}元成为会员</View>
          }
          {currentMemberType===2&&
          <View className='page-submit' onClick={this.buyAgent.bind(this,2,amount.twoAmount)}>立即以{amount.twoAmount}升级为代理商</View>
          }
          {currentMemberType===3&&
          <View className='page-submit' onClick={this.buyAgent.bind(this,3,amount.oneAmount)}>立即以{amount.oneAmount}升级为合伙人</View>
          }
        </View>
      </View>
    )
  }
}

export default Company
